{include file="public/header" /}

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <select name="cate" data-area="" lay-filter="cate">
                                <option value="">选择大分类</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <select name="cateson" data-area="" lay-filter="cateson">
                                <option value="">选择子分类</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block" id="province">
                            <select name="province" data-area="" lay-filter="province">
                                <option value="">选择省</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block" id="city">
                            <select name="city" data-area="" lay-filter="city">
                                <option value="">选择市</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block" id="area">
                            <select name="area" data-area="" lay-filter="area">
                                <option value="">选择区</option>
                            </select>
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="sreach">搜索</button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-sm" onclick="data_edit('添加','areaprice_add?cateson={$cateson}')"><i
                            class="layui-icon">&#xe654;</i>添加</button>&nbsp;
                    共有数据：<strong id="count">{$list->total()}</strong> 条
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form">
                        <thead>
                            <tr>
                                <th><div class="layui-table-cell">ID</div></th>
                                <th><div class="layui-table-cell">图标</div></th>
                                <th><div class="layui-table-cell">标题</div></th>
                                <th><div class="layui-table-cell">简述</div></th>
                                <th><div class="layui-table-cell">分类</div></th>
                                <th><div class="layui-table-cell">街道</div></th>
                                <th><div class="layui-table-cell">单价</div></th>
                                <th><div class="layui-table-cell">排序</div></th>
                                <th><div class="layui-table-cell">操作</div></th>
                            </tr>
                        </thead>
                        <tbody>
                            {foreach $list as $v}
                            <tr>
                                <td><div class="layui-table-cell">{$v.id|default='0'}</div></td>
                                <td><div class="layui-table-cell"><img onclick="showimg('{$v.images|default=''}')" src="{$v.images|default=''}"
                                        style="width: 150px;" /></div></td>
                                <td><div class="layui-table-cell">{$v.names|default='0'}</div></td>
                                <td><div class="layui-table-cell">{$v.descs|default='0'}</div></td>
                                <td><div class="layui-table-cell">{$v.cate_name|default=''}/{$v.cateson_name|default=''}</div></td>
                                <td><div class="layui-table-cell">{$v.province_text|default=''}{$v.city_text|default=''}{$v.area_text|default=''}{$v.street_text|default=''}
                                </div></td>
                                <td><div class="layui-table-cell">{$v.price|default='0'}元起/{$v.unit|default=''}</div></td>
                                <td><div class="layui-table-cell"><input type="number" class="layui-input" style="width: 100px;"
                                        value="{$v.sort|default='0'}"
                                        onblur="onblursort(this,'{$v.id}','{$v.sort|default=\'0\'}')" />
                                </div></td>
                                <td class="td-manage">
                                    <a title="编辑" onclick="data_edit('编辑','/garbag/areaprice_add?id={$v.id}')"
                                        href="javascript:;" class="layui-btn layui-btn-sm">
                                        编辑
                                    </a>
                                    <a title="删除" onclick="data_del(this,'/garbag/areaprice_del','{$v.id}')"
                                        href="javascript:;" class="layui-btn layui-btn-sm-danger layui-btn layui-btn-sm">
                                        <i class="layui-icon">&#xe640;</i>
                                    </a>
                                </div></td>

                            </tr>
                            {/foreach}

                        </tbody>
                    </table>
                </div>
                <div class="layui-card-body ">
                    <div class="page">
                        {$list->render()|raw}
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['form', 'upload'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer
            , upload = layui.upload;
        //渲染省份
        $.ajax({
            type: 'get',
            url: '/base/getarea',
            data: { level: 1 },
            success: function (res) {
                if (res.code == 0) {
                    var str = '<option value="">请选择省份</option>';
                    $.each(res.data, function (i, obj) {
                        str += '<option value="' + obj.area_code;
                        if (res.type != 1) {
                            if (obj.area_code == res.province) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '" disabled>' + obj.name;
                            }
                        } else {
                            if (obj.area_code == res.province) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '">' + obj.name;
                            }
                        }
                        str += '</option>';
                    });
                    $('select[name="province"]').html(str);
                    form.render();
                }
            }
        });
        //选软城市
        $.ajax({
            type: 'get',
            url: '/base/getarea',
            data: { level: 2 },
            success: function (res) {
                if (res.code == 0) {
                    var str = '<option value="">请选择城市</option>';
                    $.each(res.data, function (i, obj) {
                        str += '<option value="' + obj.area_code;
                        if (res.type != 1) {
                            if (obj.area_code == res.city) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '" disabled>' + obj.name;
                            }
                        } else {
                            if (obj.area_code == res.city) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '">' + obj.name;
                            }
                        }
                        str += '</option>';
                    });
                    $('select[name="city"]').html(str);
                    form.render();
                }
            }
        });
        //选软区域
        $.ajax({
            type: 'get',
            url: '/base/getarea',
            data: { level: 3 },
            success: function (res) {
                if (res.code == 0) {
                    var str = '<option value="">请选择区域</option>';
                    $.each(res.data, function (i, obj) {
                        str += '<option value="' + obj.area_code;
                        if (res.type == 3) {
                            if (obj.area_code == res.area && "{$data['id']|default='0'}" > 0) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '" disabled>' + obj.name;
                            }
                        } else {
                            if (obj.area_code == res.area && "{$data['id']|default='0'}" > 0) {
                                str += '" selected>' + obj.name;
                            } else {
                                str += '">' + obj.name;
                            }
                        }
                        str += '</option>';
                    });
                    $('select[name="area"]').html(str);
                    form.render();
                }
            }
        });
        //监听省份选择市区
        form.on('select(province)', function (data) {
            $.ajax({
                type: 'get',
                url: '/base/getarea',
                data: { id: data.value, level: 2 },
                success: function (res) {
                    if (res.code == 0 && data.value > 0) {
                        var str = '<option value="">请选择城市</option>';
                        $.each(res.data, function (i, obj) {
                            str += '<option value="' + obj.area_code;
                            str += '">' + obj.name;
                            str += '</option>';
                        });
                        $('select[name="city"]').html(str);
                        form.render();
                    }
                }
            });
            return false;
        });

        form.on('select(city)', function (data) {
            $.ajax({
                type: 'get',
                url: '/base/getarea',
                data: { id: data.value, level: 3 },
                success: function (res) {
                    if (res.code == 0 && data.value > 0) {
                        var str = '<option value="">请选择区域</option>';
                        $.each(res.data, function (i, obj) {
                            str += '<option value="' + obj.area_code;
                            str += '">' + obj.name;
                            str += '</option>';
                        });
                        $('select[name="area"]').html(str);
                        form.render();
                    }
                }
            });
            return false;
        });
        //选择大分类
        $.ajax({
            type: 'get',
            url: '/base/getcate',
            success: function (res) {
                if (res.code == 0) {
                    var str = '<option value="">请选择大分类</option>';
                    $.each(res.data, function (i, obj) {
                        str += '<option value="' + obj.id;
                        str += '">' + obj.name;
                        str += '</option>';
                    });
                    $('select[name="cate"]').html(str);
                    form.render();
                }
            }
        });
        //监听大分类更改子分类
        form.on('select(cate)', function (data) {
            $.ajax({
                type: 'get',
                url: '/base/getcateson',
                data: { id: data.value },
                success: function (res) {
                    if (res.code == 0 && data.value > 0) {
                        var str = '<option value="">请选择子分类</option>';
                        $.each(res.data, function (i, obj) {
                            str += '<option value="' + obj.id;
                            str += '">' + obj.name;
                            if (obj.province_text) {
                                str += '(' + obj.province_text + obj.city_text + obj.area_text + obj.street_text + ')';
                            }
                            str += '</option>';
                        });
                        $('select[name="cateson"]').html(str);
                        form.render();
                    }
                }
            });
            return false;
        });

        //图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: 'users_top'
            , accept: 'file'
            , exts: 'xls|csv'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.status > 0) {
                    return layer.msg(res.msg);
                }
                //上传成功
                return layer.msg(res.msg);
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-sm layui-btn layui-btn-sm-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });
    function onblursort(obj, ids, out) {
        var bulevalue = $(obj).val();
        if (bulevalue <= 0) {
            $(obj).val(out);
            layer.msg('排序数值不能小于0', { icon: 2, time: 1000 });
            return false;
        }
        //值不同进行请求
        if (bulevalue != out) {
            $.ajax({
                type: 'get',
                url: 'areapricesort',
                data: { id: ids, value: bulevalue },
                success: function (res) {
                    if (res.status == 0) {
                        layer.msg(res.msg, { icon: 1, time: 1000 });
                    } else {
                        $(obj).val(out);
                        layer.msg(res.msg, { icon: 2, time: 1000 });

                    }
                }
            });
        }
        return false;
    }
    function showimg(imgs) {
        console.log(imgs);
        layer.open({
            type: 1,
            title: false,
            shadeClose: true,
            skin: 'layui-layer-nobg', //没有背景色
            content: "<img src='" + imgs + "' style='width:100%;height: 100%;'>"
        });
    }
    function orderstr(title, url, id, status) {
        layer.confirm(title, { title: '请谨慎操作' }, function (index) {
            $.post(url, { id: id, status: status }, function (data) {
                if (data.code == 0) {
                    layer.msg(data.msg, { icon: 1, time: 1000 });
                    location.replace(location.href);
                } else {
                    layer.msg(data.msg, { icon: 2, time: 1000 });
                }
            });
        });
    }
</script>
{include file="public/footer"}